<template>
    <div class="tag-picker">
        <h5>{{title}}</h5>
        <hr>
        <tag-list
            ref="tagList"
            @unset-tag="removeTags"
            @set-tag="addTag"
            :multiTag="true"
            :activeTags='arr'
            :data="$attrs.data"
            :disabled="true"
        ></tag-list>
            
        <div class="card">
            
            <div class="card-body">
                <h5>已选择：</h5>
                <transition-group name="chosedTag" tag="div">
                    <a-tag v-for="_id in arr"
                        class="chosedTag"
                        :editMode="true"
                        :tag="$attrs.data[_id]"
                        :key="_id"
                        @remove='removeChosedTag'
                    ></a-tag>
                </transition-group>
                <div class="text-right">
                    <button class="btn btn-sm btn-primary" @click="confirm" :disabled="state != 'pending'">确定</button>
                    <button class="btn btn-sm btn-outline-dark" @click="$emit('close')">关闭</button>
                </div>
            </div>
        </div>
          
    </div>  
</template>
<script type="text/javascript">
import picker from './picker'
import tagList from './tag-list'
import aTag from './a-tag'
import Scrollbar from 'smooth-scrollbar'
import vJstree from 'vue-jstree'
import $ from 'jquery'

export default {
    mixins: [picker],
    components: {tagList, aTag},
    data() {
        var vm = this;
        return {
            notifier: $.Deferred().done(function() {
                vm.$emit('close');
            })
        }
    },
    props: {
        confirmHandler: {
            type: Function,
            required: true
        }
    },
    methods: {
        addTag(_id) {
            this.add(_id);
        },
        removeTags(arr) {
            var vm = this;
            arr.forEach(x => {
                vm.remove(_id);
            })
        },
        removeChosedTag(tag) {
            this.remove(tag._id);
        }
    },
    created() {

    }
}
</script>
<style type="text/css">
.tag-picker {
    padding: 8px;
}

.chosedTag-enter-active,
.chosedTag-leave-active,
.chosedTag-enter-active~.chosedTag,
.chosedTag-leave-active~.chosedTag {
    -webkit-transition: opacity .5s, transform .5s, margin .5s;
    -o-transition: opacity .5s, transform .5s, margin .5s;
    transition: opacity .5s, transform .5s, margin .5s;
}

.chosedTag-enter,
.chosedTag-leave-to {
    opacity: 0;
    margin-left: 0;
    margin-right: 0;
}

.chosedTag-enter~.chosedTag {
    -webkit-transform: translateX(100%);
       -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
         -o-transform: translateX(100%);
            transform: translateX(100%);
}

.chosedTag-leave-to~.chosedTag {
    -webkit-transform: translateX(-100%);
       -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
         -o-transform: translateX(-100%);
            transform: translateX(-100%);
}

</style>